// ==UserScript==
// @name         网页视频加速控制器
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  为网页中的视频添加自定义播放速度控制
// @author       你
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // 从存储中获取用户设置的速度
    let customSpeed = GM_getValue('customSpeed', 1.0);
    let panelVisible = GM_getValue('panelVisible', false); // 默认隐藏面板，只显示半圆

    // 创建控制面板样式
    GM_addStyle(`
        #video-speed-control-panel {
            position: fixed;
            top: 40%;
            right: 0;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
            border-radius: 10px 0 0 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
            z-index: 9999;
            min-width: 200px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: right center;
            opacity: ${panelVisible ? '1' : '0.9'};
            transform: translateY(-50%) translateX(${panelVisible ? '0' : 'calc(100% - 0px)'});
        }

        #video-speed-control-panel:hover {
            opacity: 1;
        }

        .toggle-panel {
            position: absolute;
            left: 0;
            top: 40%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: -1;
        }

        .toggle-panel:hover {
            background: rgba(0, 0, 0, 0.85);
        }

        .panel-content {
            margin-left: 20px;
            opacity: ${panelVisible ? '1' : '0'};
            transition: opacity 0.2s ease ${panelVisible ? '0.1s' : '0s'};
        }

        .speed-control-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .speed-value {
            font-size: 20px;
            font-weight: bold;
            min-width: 45px;
            text-align: center;
        }

        .speed-btn {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .speed-btn:hover {
            background: #45a049;
            transform: scale(1.05);
        }

        .speed-slider {
            width: 100%;
            margin: 15px 0;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 5px;
            background: #555;
            outline: none;
        }

        .speed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2196F3;
            cursor: pointer;
            transition: all 0.2s;
        }

        .speed-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2196F3;
            cursor: pointer;
            transition: all 0.2s;
        }

        .speed-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: #0b7dda;
        }

        .preset-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 15px;
        }

        .preset-btn {
            background: #2196F3;
            border: none;
            color: white;
            padding: 8px 4px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 13px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .preset-btn:hover {
            background: #0b7dda;
            transform: translateY(-2px);
        }
        .fa-lg {
           font-size: 10px !important;
           margin-left:-25px;
        }
    `);

    // 创建控制面板
    function createControlPanel() {
        const panel = document.createElement('div');
        panel.id = 'video-speed-control-panel';

        panel.innerHTML = `
            <button class="toggle-panel" title="显示/隐藏控制面板">
                <i class="fas fa-play-circle fa-lg">视频<br/>加速</i>
            </button>
            <div class="panel-content">
                <div class="speed-control-group">
                    <button class="speed-btn" id="decrease-speed">-</button>
                    <span class="speed-value" id="current-speed">${customSpeed}x</span>
                    <button class="speed-btn" id="increase-speed">+</button>
                </div>
                <input type="range" min="0.5" max="16" step="0.1" value="${customSpeed}"
                       class="speed-slider" id="speed-slider">
                <div class="preset-buttons">
                    <button class="preset-btn" data-speed="0.5">0.5x</button>
                    <button class="preset-btn" data-speed="1.0">1.0x</button>
                    <button class="preset-btn" data-speed="1.5">1.5x</button>
                    <button class="preset-btn" data-speed="2.0">2.0x</button>
                    <button class="preset-btn" data-speed="3.0">3.0x</button>
                    <button class="preset-btn" data-speed="4.0">4.0x</button>
                    <button class="preset-btn" data-speed="8.0">8.0x</button>
                    <button class="preset-btn" data-speed="16.0">16.0x</button>
                </div>
            </div>
        `;

        document.body.appendChild(panel);

        // 添加事件监听
        document.getElementById('decrease-speed').addEventListener('click', () => setSpeed(customSpeed - 0.1));
        document.getElementById('increase-speed').addEventListener('click', () => setSpeed(customSpeed + 0.1));
        document.getElementById('speed-slider').addEventListener('input', (e) => setSpeed(parseFloat(e.target.value)));

        // 预设速度按钮
        document.querySelectorAll('.preset-btn').forEach(btn => {
            btn.addEventListener('click', () => setSpeed(parseFloat(btn.dataset.speed)));
        });

        // 面板切换 - 使用mouseenter/mouseleave实现悬停效果
        panel.addEventListener('mouseenter', () => {
            panelVisible = true;
            savePanelState();
            updatePanelVisibility();
        });

        panel.addEventListener('mouseleave', () => {
            panelVisible = false;
            savePanelState();
            updatePanelVisibility();
        });

        // 点击半圆按钮强制切换面板状态
        document.querySelector('.toggle-panel').addEventListener('click', (e) => {
            e.stopPropagation(); // 防止触发mouseleave事件
            panelVisible = !panelVisible;
            savePanelState();
            updatePanelVisibility();
        });

        return panel;
    }

    // 保存面板状态
    function savePanelState() {
        GM_setValue('panelVisible', panelVisible);
    }

    // 更新面板可见性
    function updatePanelVisibility() {
        const panel = document.getElementById('video-speed-control-panel');
        const content = document.querySelector('.panel-content');

        if (panel && content) {
            panel.style.transform = `translateY(-50%) translateX(${panelVisible ? '0' : 'calc(100% - 0px)'})`;
            panel.style.opacity = panelVisible ? '1' : '0.9';
            content.style.opacity = panelVisible ? '1' : '0';
            content.style.transitionDelay = panelVisible ? '0.1s' : '0s';
        }
    }

    // 设置视频速度
    function setSpeed(speed) {
        // 限制速度范围
        speed = Math.max(0.5, Math.min(16, speed));
        speed = Math.round(speed * 10) / 10; // 保留一位小数

        customSpeed = speed;
        GM_setValue('customSpeed', speed);

        // 更新UI
        document.getElementById('current-speed').textContent = `${speed}x`;
        document.getElementById('speed-slider').value = speed;

        // 应用到所有视频
        document.querySelectorAll('video').forEach(video => {
            video.playbackRate = speed;
        });
    }

    // 初始化
    function init() {
        // 创建控制面板
        createControlPanel();

        // 初始设置视频速度
        document.querySelectorAll('video').forEach(video => {
            video.playbackRate = customSpeed;
        });

        // 监听新视频元素添加
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (node.tagName === 'VIDEO') {
                        node.playbackRate = customSpeed;
                    }
                });
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // 添加菜单项
        GM_registerMenuCommand("切换控制面板固定显示", () => {
            panelVisible = !panelVisible;
            savePanelState();
            updatePanelVisibility();
        });
        GM_registerMenuCommand("重置为1.0倍速", () => setSpeed(1.0));
    }

    // 当DOM加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();